<template>
  <div class="path-list">
    <a-form v-if="this.sampleInfo.id" layout="inline" class="default-search-form gb-flex-form">
      <a-row :gutter="8">
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item :colon="false" label="样本编号">
            {{ sampleInfo.sampleCode }}
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item :colon="false" label="受检者">
            {{ sampleInfo.sampleName }}
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-form v-if="this.sampleInfo.id === undefined" layout="inline" class="default-search-form gb-flex-form" :form="form" @submit="handleSearch">
      <a-row :gutter="8">
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item :colon="false" label="受检者">
            <a-input v-decorator="['sampleName']" placeholder="受检者"/>
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item :colon="false" label="样本编号">
            <a-input v-decorator="['sampleCode']" placeholder="样本编号"/>
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item :colon="false" label="提交状态">
            <a-radio-group
                button-style="solid"
                v-decorator="['pathStatus',{initialValue:''}]"
                placeholder="提交状态"
            >
              <a-radio-button value="true">
                是
              </a-radio-button>
              <a-radio-button value="false">
                否
              </a-radio-button>
              <a-radio-button value="">
                全部
              </a-radio-button>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item :colon="false" label="创建人">
            <a-input v-decorator="['createByDesc']" placeholder="创建人"/>
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item :colon="false" label="创建日期">
            <a-range-picker v-decorator="['createTime']" />
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item class="gb-search-button">
            <a-button class="item" v-if="funcs['PathSearch']" type="primary" html-type="submit">
              {{ $t(funcs['PathSearch']) }}
            </a-button>
            <a-button type="primary" class="item" @click="handleReset">
              {{ $t('reset') }}
            </a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <div class="table-multiple-operations building">
      <PathForm v-if="funcs['PathCreate']" class="item" :sampleInfo="sampleInfo" :text="$t(funcs['PathCreate'])" :callback="handleSearch" url="/backend/path/create" />
      <AnalysisSubmit v-if="funcs['PathAnalyseSubmit'] && this.sampleInfo.id" class="item" :text="$t(funcs['PathAnalyseSubmit'])" :rows="selectedRows" :building="building" :callback="handleSearch" url="/backend/path/submit" />
      <PathDownload v-if="funcs['PathDownload'] && this.sampleInfo.id === undefined" class="item" url="/backend/analysis/downloadBioFile">下载模板</PathDownload>
      <PathUpload v-if="funcs['PathImport'] && this.sampleInfo.id === undefined" class="item" :callback="handleSearch">导入</PathUpload>
      <AnalysisSubmit v-if="funcs['PathAnalyseSubmit'] && this.sampleInfo.id === undefined" class="item" :rows="selectedRows" :building="building" :text="$t(funcs['PathAnalyseSubmit'])" :callback="handleSearch" url="/backend/path/submit" />
      <PathControlSetName class="item" @handleChange="handleChange"/>
    </div>

    <a-table :columns="columns"
      :rowKey="record => record.id"
      :dataSource="data"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      size="small"
      :scroll="{ x: scollX }"
    >
      <div slot="long_column_ellipsis" slot-scope="text">
        <LongTableColumn>{{ text }}</LongTableColumn>
      </div>

      <div class="table-single-operations" slot="action" slot-scope="text, record">
        <PathForm v-if="funcs['PathUpdate']" class="item" :text="$t(funcs['PathUpdate'])" displayType="LINK" :row="record" :callback="handleSearch"  url="/backend/path/update" />
        <Delete v-if="funcs['PathDelete']" class="item" :text="$t(funcs['PathDelete'])" displayType="LINK" :rows="[record]" :callback="handleSearch" url="/backend/path/delete" />
      </div>
    </a-table>
  </div>
</template>
<script>
import axios from 'axios'
import common from '@/global/common.js'
import PathUpload from "@/components/path/PathUpload";
import PathDownload from "@/components/path/PathDownload";
import AnalysisSubmit from "@/components/analysis/AnalysisSubmit";
export default {
  components: {AnalysisSubmit, PathDownload, PathUpload},
  props: {
    sampleInfo: { type: [Object], default: () => { return {} } },
  },
  data() {
    return {
      form: this.$form.createForm(this, {name: this._uid}),
      data: [],
      loading: true,
      selectedRowKeys: [],
      selectedRows: [],
      pagination: {sortField: 'sample_id', sortOrder: 'ascend', ...common.getPagination()},
      actionWidth: 0,
      building:{buildingType : '1'}
    }
  },
  computed: {
    scollX() {
      let rs = 1000
      if (this.sampleInfo.id) {
        rs = undefined
      }
      return rs
    },
    funcs() {
      return common.getVisibleFunc('PathList')
    },
    columns() {
      let columns = [
        { title: "样本批次号", dataIndex: 'sampleBatchCode', key: 'sample_batch_code', width: 180,},
        { title: "样本编号", dataIndex: 'sampleCodeDesc', sorter: true, key: 'sample_code', width: 180,},
        { title: "受检者", dataIndex: 'sampleNameDesc',  defaultSortOrder:'ascend', key: 'sample_name', width: 120,},
        { title: "检测项目", dataIndex: 'testMetaDesc', key: 'test_meta_id', width: 120, },
        { title: "文件地址", dataIndex: 'filePath', key: 'file_path',scopedSlots: { customRender: 'long_column_ellipsis' }, width: 155,},
        { title: "R1_LIST", dataIndex: 'r1List', key: 'r1_list', scopedSlots: { customRender: 'long_column_ellipsis' },width: 155, },
        { title: "R2_LIST", dataIndex: 'r2List', key: 'r2_list', scopedSlots: { customRender: 'long_column_ellipsis' },width: 155},
        { title: "备注", dataIndex: 'note', key: 'note',width: 100},
        { title: "提交状态", dataIndex: 'statusDesc', key: 'path_status',width: 100},
        { title: this.$t("create_date"), dataIndex: 'createTime', sorter: true, key: 'create_time',width: 155},
        { title: this.$t("create_by"), dataIndex: 'createByDesc', key: 'create_by',width: 120},
        { title: this.$t("update_date"), dataIndex: 'updateTime', sorter: true, key: 'update_time',width: 155},
        { title: this.$t("update_by"), dataIndex: 'updateByDesc', key: 'update_by',width: 120},
        { title: this.$t("action"), key: 'action', scopedSlots: { customRender: 'action' }, width: 100, fixed: 'right', }
      ]
      if (this.sampleInfo.id) {
        columns = columns.filter(item =>{
          let key = item.dataIndex || item.key;
          return ['testMetaDesc', 'filePath', 'r1List', 'r2List', 'note', 'statusDesc', 'action'].includes(key)
        })
      }
      return columns
    },
  },
  mounted() {
    this.fetch();
  },
  methods: {
    handleSearch (e) {
      if(e){
        this.pagination.current = 1;
        e.preventDefault();
      }
      this.fetch()
    },
    handleReset () {
      this.form.resetFields();
      this.handleSearch()
    },
    handleActionWidth (data) {
      this.actionWidth = data
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRows = selectedRows
      this.selectedRowKeys = selectedRowKeys
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination.pageSize = pagination.pageSize
      this.pagination.current = pagination.current
      this.pagination.sortField = ''
      this.pagination.sortOrder = ''
      if (sorter.column) {
        this.pagination.sortField = sorter.columnKey
        this.pagination.sortOrder = sorter.order
      }
      this.fetch({
        ...filters,
      });
    },
    fetch (param = {}) {
      this.form.validateFields((err, formValue) => {
        if (err) {
          return;
        }
        this.loading = true
        this.handleParam(formValue)
        axios({
          url: '/backend/path/find',
          method: 'get',
          params: {
            pageSize: this.pagination.pageSize,
            pageNum: this.pagination.current,
            sortField: this.pagination.sortField,
            sortOrder: this.pagination.sortOrder,
            sampleId:this.sampleInfo.id,
            ...param,
            ...formValue
          },
        }).then((res) => {
          this.pagination.total = res.data.total;
          this.data = res.data.rows;
        }).catch(() => {
          
        }).finally(() => {
          this.loading = false;
        })
      });
    },
    handleParam(formValue) {
      let createTime = formValue.createTime
      if (createTime && createTime.length > 1) {
        formValue["createTimeStart"] = createTime[0].format('YYYY-MM-DD')
        let endTime = createTime[1]
        formValue["createTimeEnd"] = endTime.format('YYYY-MM-DD')
      }
      delete formValue.createTime
    },
    handleChange(values) {
      this.building = {...this.building, ...values}
      console.log(this.building)
    },
  },
}
</script>
<style>
.path-list .ant-form-item-label {
  width: 120px;
}
.building {
  display: flex;
}
</style>